<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />

  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />

  <title>Produto interno</title>
  
  <!-- Included CSS Files (Uncompressed) -->
  <!--
  <link rel="stylesheet" href="stylesheets/foundation.css">
  -->
  
  <!-- Included CSS Files (Compressed) -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">
  <link rel="stylesheet" href="stylesheets/estilo.css">

  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
  
  <!-- Header and Nav -->
  <header>
    <div class="row">
      <div class="three columns">
        <h1><img src="./images/logo.png"></h1>
      </div>
      <div class="five columns">
        <ul class="nav-bar right">
          <li><a href="#">Cadastro</a></li>
          <li><a href="#">Contatos</a></li>
        </ul>
      </div>
      
      <div class="four columns">
        <ul class="inline-list right" style="margin-top: 18px;">
          <li>Seja bem vindo(a)<a class="login" href="singin_singup.html" rel="nofollow">Entrar</a></li>
        </ul>
      </div>  
    </div>
  </header>
  
  <!-- End Header and Nav -->

  <div class="row">
    <div class="twelve columns">
      <ul class="nav-bar">
        <li><a href="#">Categoria</a></li>
        <li><a href="#">Categoria</a></li>
        <li><a href="#">Categoria</a></li>
        <li><a href="#">Categoria</a></li>

      </ul>
    </div>
  </div>
  
  
  <!-- First Band (Slider) -->
  <!-- The Orbit slider is initialized at the bottom of the page by calling .orbit() on #slider -->
    
   
  <!-- Three-up Content Blocks -->
  
  <div class="row">
      <div class="twelve columns">
          <div class="row">
            <div class="five columns"> 
                <div class="row">
                  <a href="#" class="th twelve columns"><img src="./images/moto1.png"></a>
                </div>
                
            </div>

            <div id="box_compra" class="seven columns">
              <h4 class="titulo-produto">GSX-R750</h4>
              <p>
                Com rendimento nunca antes visto. O modelo dominou as principais competições.
              
                <p>R$ <span class="titulo-valor"> 15.000</span></p>

                <button class="button alert"  type="submit">Comprar</button>
            </div>
          </div> 

          <!-- box produto -->
             <div class="row" style="margin-top:60px;">
              <h4>Produtos em destaque</h4>
              <div class="separator"><div></div></div>

             
             <div class="box_produtos three columns">
               <a href="" class="th"><img src="./images/moto1.png"></a>
                 <div class="panel">
                   <h4 class="titulo-produto">GSX-R750</h4>
                   <p class="titulo-descri1">Com rendimento nunca antes visto. O modelo dominou as principais competições.</p>
                   <p>R$ <span class="titulo-valor"> 15.000</span></p>
                   <a href="#" class="small button alert radius">Mais informações</a>
                 </div>
             </div>


             <div class="box_produtos three columns">
               <a href="" class="th"><img src="./images/moto1.png"></a>
                 <div class="panel">
                   <h4 class="titulo-produto">GSX-R750</h4>
                   <p class="titulo-descri1">Com rendimento nunca antes visto. O modelo dominou as principais competições.</p>
                   <p>R$ <span class="titulo-valor"> 15.000</span></p>
                   <a href="#" class="small button alert radius">Mais informações</a>
                 </div>
             </div>


             <div class="box_produtos three columns">
               <a href="" class="th"><img src="./images/moto1.png"></a>
                 <div class="panel">
                   <h4 class="titulo-produto">GSX-R750</h4>
                   <p class="titulo-descri1">Com rendimento nunca antes visto. O modelo dominou as principais competições.</p>
                   <p>R$ <span class="titulo-valor"> 15.000</span></p>
                   <a href="#" class="small button alert radius">Mais informações</a>
                 </div>
             </div>


             <div class="box_produtos three columns">
               <a href="" class="th"><img src="./images/moto1.png"></a>
                 <div class="panel">
                   <h4 class="titulo-produto">GSX-R750</h4>
                   <p class="titulo-descri1">Com rendimento nunca antes visto. O modelo dominou as principais competições.</p>
                   <p>R$ <span class="titulo-valor"> 15.000</span></p>
                   <a href="#" class="small button alert radius">Mais informações</a>
                 </div>
             </div>
          
                                  
             </div>
           <!-- end box produto -->
      </div>
  </div>

  
   
  
  <!-- Footer -->
  
  <footer>
    <div class="row">
      <div class="twelve columns">
        <hr />
        <div class="row">
          <div class="six columns">
            <p>&copy; Copyright no one at all. Go to town.</p>
          </div>
        </div>
      </div> 
    </div>
  </footer>
  
  <!-- Included JS Files (Uncompressed) -->
  <!--
  
  <script src="javascripts/jquery.js"></script>
  
  <script src="javascripts/jquery.foundation.mediaQueryToggle.js"></script>
  
  <script src="javascripts/jquery.foundation.forms.js"></script>
  
  <script src="javascripts/jquery.event.move.js"></script>
  
  <script src="javascripts/jquery.event.swipe.js"></script>
  
  <script src="javascripts/jquery.foundation.reveal.js"></script>
  
  <script src="javascripts/jquery.foundation.orbit.js"></script>
  
  <script src="javascripts/jquery.foundation.navigation.js"></script>
  
  <script src="javascripts/jquery.foundation.buttons.js"></script>
  
  <script src="javascripts/jquery.foundation.tabs.js"></script>
  
  <script src="javascripts/jquery.foundation.tooltips.js"></script>
  
  <script src="javascripts/jquery.foundation.accordion.js"></script>
  
  <script src="javascripts/jquery.placeholder.js"></script>
  
  <script src="javascripts/jquery.foundation.alerts.js"></script>
  
  <script src="javascripts/jquery.foundation.topbar.js"></script>
  
  <script src="javascripts/jquery.foundation.joyride.js"></script>
  
  <script src="javascripts/jquery.foundation.clearing.js"></script>
  
  <script src="javascripts/jquery.foundation.magellan.js"></script>
  
  -->
  
  <!-- Included JS Files (Compressed) -->
  <script src="javascripts/jquery.js"></script>
  <script src="javascripts/foundation.min.js"></script>
  
  <!-- Initialize JS Plugins -->
  <script src="javascripts/app.js"></script>

  <script type="text/javascript">
     $(window).load(function() {
         $('#slider').orbit();
     });
  </script>
</body>
</html>
